<template>
  <view class="quotation-page">
    
    <view class="form-container">
      
      <view class="form-content">
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">姓名</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.name" 
            placeholder="请输入您的姓名"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">电话号码</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.phone" 
            placeholder="请输入电话号码"
            type="number"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">公司名称</text>
            <text class="required">*</text>
          </view>
          <input 
            class="form-input" 
            v-model="formData.companyName" 
            placeholder="请输入公司名称"
          />
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">上传名片</text>
            <text class="required">*</text>
          </view>
          <view class="upload-section">
            <view class="upload-btn" @click="chooseImage" v-if="!formData.businessCard">
              <text class="upload-icon">📷</text>
              <text class="upload-text">点击上传名片</text>
            </view>
            <view class="uploaded-image" v-else>
              <image :src="formData.businessCard" class="card-image" mode="aspectFit" />
              <view class="remove-btn" @click="removeImage">
                <text class="remove-icon">×</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="form-group">
          <view class="input-label">
            <text class="label-text">备注</text>
          </view>
          <textarea 
            class="form-textarea" 
            v-model="formData.remarks" 
            placeholder="请输入备注信息"
            maxlength="200"
          />
          <view class="char-count">{{ formData.remarks.length }}/200</view>
        </view>
      </view>
      
      <view class="form-actions">
        <view class="submit-btn" @click="handleSubmit" :class="{ 'disabled': !canSubmit }">
          <text class="submit-text">提交报价申请</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QuotationPage',
  data() {
    return {
      productId: '',
      formData: {
        name: '',
        phone: '',
        companyName: '',
        businessCard: '',
        remarks: ''
      }
    }
  },
  onLoad(options) {
    this.productId = options.productId || ''
  },
  computed: {
    canSubmit() {
      return this.formData.name && 
             this.formData.phone && 
             this.formData.companyName && 
             this.formData.businessCard &&
             this.validatePhone(this.formData.phone)
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    validatePhone(phone) {
      const re = /^1[3-9]\d{9}$/
      return re.test(phone)
    },
    async chooseImage() {
      try {
        const res = await uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera']
        })
        
        if (res.tempFilePaths && res.tempFilePaths.length > 0) {
          this.formData.businessCard = res.tempFilePaths[0]
        }
      } catch (error) {
        console.error('选择图片失败:', error)
        uni.showToast({
          title: '选择图片失败',
          icon: 'none'
        })
      }
    },
    
    removeImage() {
      this.formData.businessCard = ''
    },
    
    async handleSubmit() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({ title: '提交中...' })
        
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
        
      } catch (error) {
        console.error('提交报价失败:', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.quotation-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.nav-placeholder {
  width: 60rpx;
}

.form-container {
  background: #fff;
  margin: 20rpx;
  margin-top: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.form-title {
  padding: 40rpx 30rpx 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.title-text {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.title-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.form-content {
  padding: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.input-label {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.label-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.required {
  color: #dd524d;
  margin-left: 5rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #3cc51f;
}

.upload-section {
  .upload-btn {
    width: 100%;
    height: 200rpx;
    border: 2rpx dashed #e5e5e5;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
  }
  
  .upload-icon {
    font-size: 48rpx;
    margin-bottom: 15rpx;
  }
  
  .upload-text {
    font-size: 26rpx;
    color: #666;
  }
  
  .uploaded-image {
    position: relative;
    width: 100%;
    height: 200rpx;
    border-radius: 8rpx;
    overflow: hidden;
  }
  
  .card-image {
    width: 100%;
    height: 100%;
  }
  
  .remove-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .remove-icon {
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
  }
}

.form-textarea {
  width: 100%;
  min-height: 150rpx;
  padding: 20rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fff;
  resize: none;
  box-sizing: border-box;
}

.form-textarea:focus {
  border-color: #3cc51f;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.form-actions {
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background: #3cc51f;
  color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn.disabled {
  background: #ccc;
  color: #999;
}

.submit-text {
  font-size: 32rpx;
  font-weight: bold;
  color: inherit;
}
</style>